<template>
  <div class="card">
    <!-- 如果没有文章就显示空状态 -->
    <el-empty
      description="当前还没有文章哦~"
      v-show="articles.length == 0"
    ></el-empty>
    <div class="article" v-for="article in articles" :key="article.id">
      <div class="head">
        <div class="photo">
          <img src="../../assets/img/头像.png" alt="" />
        </div>
        <div class="nikeName">
          <span>{{ article.nickname }}</span>
        </div>
      </div>
      <div>
        <router-link
          :to="{ name: 'NewDetails', params: { id: article.id } }"
          target="_blank"
        >
          <!-- 跳转到当前文章的详情页面-->
          <h2 class="title">{{ article.title }}</h2>
          <span class="content">{{ article.desc }}</span>
        </router-link>
      </div>

      <div class="action">
        <div class="time">
          <span>{{ article.createTime }}</span>
        </div>
        <div class="col">
          <img src="../../assets/img/点赞 (off).png" alt="" />
          <span>{{ article.likeCount }}</span>
        </div>
        <div class="col">
          <img src="../../assets/img/评论.png" alt="" />
          <span>{{ article.commentCount }}</span>
        </div>
        <div class="col">
          <img src="../../assets/img/收藏 (off).png" alt="" />
          <span>{{ article.collectCount }}</span>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="page" v-show="articles.length != 0 && $route.name == 'NewList'">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageDto.pageSize"
        :current-page.sync="pageDto.curPage"
        layout="total, prev, pager, next"
        :total="totalPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import instance from "../../utils/request";
export default {
  name: "NewList",
  methods: {
    /**
     * 分页：选择指定页数后触发
     * @param {*} val 当前页数
     */
    handleCurrentChange() {
      instance
        .post("/article/new_article_page", this.pageDto)
        .then((success) => {
          if (success.data.code == 10000) {
            this.articles = success.data.data.list;
            console.log(success.data.msg);
          }
        })
        .catch((error) => {
          Message.error("服务器获取数据失败");
          console.log(error);
        });
    },
  },
  data() {
    return {
      //文章列表
      articles: [
        {
          id: 1,
          title: "大家帮我看看，我女儿到底有没有绘画天赋？",
          content:
            "它叫我输个名字： 快跑！！！！！！别管你孩子有没有天赋了，先把这个班退了先。 且不说现在看不出什么天赋与才能，兴趣才是最好的的源动力，不能功利武断适得其…",
          likeCount: 4,
          commentCount: 8,
          collectCount: 21,
        },
        {
          id: 1,
          title: "大家帮我看看，我女儿到底有没有绘画天赋？",
          content:
            "它叫我输个名字： 快跑！！！！！！别管你孩子有没有天赋了，先把这个班退了先。 且不说现在看不出什么天赋与才能，兴趣才是最好的的源动力，不能功利武断适得其…",
          likeCount: 4,
          commentCount: 8,
          collectCount: 21,
        },
        {
          id: 1,
          title: "大家帮我看看，我女儿到底有没有绘画天赋？",
          content:
            "它叫我输个名字： 快跑！！！！！！别管你孩子有没有天赋了，先把这个班退了先。 且不说现在看不出什么天赋与才能，兴趣才是最好的的源动力，不能功利武断适得其…",
          likeCount: 4,
          commentCount: 8,
          collectCount: 21,
        },
        {
          id: 1,
          title: "大家帮我看看，我女儿到底有没有绘画天赋？",
          content:
            "它叫我输个名字： 快跑！！！！！！别管你孩子有没有天赋了，先把这个班退了先。 且不说现在看不出什么天赋与才能，兴趣才是最好的的源动力，不能功利武断适得其…",
          likeCount: 4,
          commentCount: 8,
          collectCount: 21,
        },
      ],
      //当前所在页数
      pageDto: {
        curPage: 1,
        //总页数
        //每页显示条数
        pageSize: 3,
      },
      totalPage: 0,
    };
  },

  beforeMount() {
    instance
      .post("/article/new_article_page", this.pageDto)
      .then((success) => {
        if (success.data.code == 10000) {
          this.articles = success.data.data.list;
          this.totalPage = success.data.data.total;
        } else {
          Message.error("最新列表获取异常，稍后重试");
        }
      })
      .catch((error) => {
        Message.error("最新列表获取错误"), console.log(error);
      });
  },
};
</script>

<style scoped>
.card {
  width: 100%;
  max-height: 600px;
  overflow: auto;
}
.time {
  width: 180px;
}
.time > span {
  color: rgba(0, 0, 0, 0.45);
}
.article {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
}
.head {
  display: flex;
}
.photo {
  margin-bottom: 10px;
}
.photo > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.nikeName {
  margin: 10px 20px;
}
.article .title {
  width: 100%;
  padding-bottom: 10px;
  font-size: 18px;
  font-synthesis: style;
  font-weight: 600;
}

.article .content {
  display: block;
  width: 100%;
  height: 40px;
  color: #121212;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
    sans-serif;
  font-size: 15px;
  padding-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置对齐模式，这里是纵向对齐*/
  -webkit-line-clamp: 2;
}

.action {
  width: 400px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.action span {
  display: block;
}

.action .col {
  width: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.page {
  width: 450px;
  height: 30px;
  margin: 5px auto;
}
</style>